<template>
  <div id="login">
    <H1>登陆页面</H1>
    <van-form @submit="onSubmit">
      <van-field
        v-model="mobile"
        name="用户名"
        placeholder="用户名"
        :rules="[{ required: false, message: '请填写用户名' }]"
      />
      <van-button native-type="button" @click="sendSms">发送验证码</van-button>

      <van-field
        v-model="sms"
        type="text"
        name="密码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
</van-form>

    <div>
      在vue的组件中订阅vuex中的数据
      {{$store.state.address}}

      <button @click='changeAddress'>修改vuex数据</button>

      <input v-model='city'/>
      <button @click='findweather'>查询</button>
      {{$store.getters.second}}

      {{username}}----{{$store.state.shop.itemId}}

      <button @click='fnUser'>按钮</button>

      {{ress}}---{{name}}----{{namekity}}
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {createNamespacedHelpers} from 'vuex'
const {mapState:mapStateUser,mapActions:mapActionUser,mapMutations:mapMutaionuser,mapGetters:mapGetterUser} = createNamespacedHelpers('user')

import {smsCode,login} from '@/http/api'
export default {
name:"login",
data() {
return {
      mobile: '',
      sms: '',
      city:'北京',
      // username:this.$store.state.user.username
}
},
computed:{
  ...mapState({
    ress:'address'
  }),
  ...mapStateUser({
    name:'username'
  }),
  ...mapGetterUser({
    namekity:'namekity'
  }),
  username(){
    return this.$store.state.user.username
}
  
},
//生命周期 - 创建完成（访问当前this实例）
created() {

},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {

},
methods:{
  ...mapMutaionuser({
    ser:'fnuser'
  }),
   async  onSubmit(values) {
     let res=await login({mobile:this.mobile,	sms_code:this.sms,type:2,client:'1'})
      console.log(res);
      this.$store.commit('setToken',res.data.data.remember_token)
      this.$router.push('/person') 
    },
   async  sendSms(){
    let res = await  smsCode({mobile:this.mobile,sms_type:'login'});
    console.log(res);
    },
    changeAddress(){
         this.$store.commit('changeAddress','上海市')
    },
    findweather(){
             this.$store.dispatch('findWeather',this.city)
    },
    fnUser(){
      // this.$store.commit('fnuser','tom')
      this.ser('tom')
    }

}
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>